<style lang="scss" scoped>
.index {
    // width: 100vw;
    // background: url("../../static/images/index/index_bg.png");
    // background-size: 100% 100%;
    // background-repeat: no-repeat;
    // 渐变色
    background: linear-gradient(180deg, #f9f4e6 0%, #f9f4e6 100%);
    .scroll-Y {
        width: 100%;
        box-sizing: border-box;
        padding: 0 0.8rem;
        ::v-deep .u-tab-item {
            padding: 0 !important;
            padding-right: 1rem !important;
        }
    }
    .top_tabs {
        background-color: #fcf2e0;
        width: 100vw;
        position: fixed;
        top: 0;
        left: 0;
        padding: 0 0.8rem;
    }
    .a {
        background-color: red;
    }
}
</style>

<template>
    <view class="index">
        <u-navbar-s></u-navbar-s>
        <view class="scroll-Y">
            <!-- top导航 -S -->
            <u-tabs :list="state.tabslist" :is-scroll="true" :current="state.current" @change="change" :showBar="false" :bgColor="''" :fontSize="'38'" :activeColor="'#000'"></u-tabs>
            <!-- top导航 -E -->
            <view>
                <!-- 切换页面 1 -S -->
                <view v-show="state.current == 1">
                    <view1 v-show="state.current == 1" ref="view1ref" :searchSketchArr="state.searchSketchArr"></view1>
                </view>
                <!-- 切换页面 1 -E -->
                <!-- 切换页面 2 -S -->
                <view v-show="state.current == 0">
                    <view2 v-show="state.current == 0" ref="view2ref" :searchSketchArr="state.searchSketchArr"></view2>
                </view>
                <!-- 切换页面 2 -E -->
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick } from "vue";
import {
    onLoad,
    onShow,
    onPullDownRefresh,
    onReachBottom,
    onTabItemTap,
} from "@dcloudio/uni-app";
import { banner, listsAll, searchSketch } from "@/api/index";
import view1 from "./view1.vue";
import view2 from "./view2.vue";
components: {
    view2;
    view1;
}
const tabs = ref(null);
const view1ref = ref(null);
const view2ref = ref(null);
const state = reactive<{
    tabslist: Array;
    current: number;
    searchSketchArr: Array;
    page: number;
    page_size: number;
    count: number;
}>({
    count: 999999,
    page_size: 30,
    page: 1,
    searchSketchArr: [],
    current: 0,
    tabslist: [
        {
            name: "小说推文",
        },
        // {
        // name: "影视短剧",
        // },
        // {
        //     name: "精品小说",
        // },
    ],
});
onLoad(() => {
    // 如果没有缓存就请求数据
    if (!uni.getStorageSync("indexonLoad")) {
        getData().then(() => {
            nextTick(() => {
                view1ref.value.localData();
                view2ref.value.localData();
                uni.setStorageSync("indexonLoad", true);
            });
        });
    } else {
        // 有缓存就取缓存
        nextTick(() => {
            view1ref.value.localData();
            view2ref.value.localData();
        });
    }
    getfooterlist();
});
onPullDownRefresh(() => {
    state.page = 0;
    getData().then(() => {
        uni.stopPullDownRefresh();
    });
});
// 上拉加载
onReachBottom(() => {
    getfooterlist();
});
// 请求数据
const getData = async () => {
    const bannerlist = await banner();
    uni.setStorageSync("bannerlist", bannerlist);
    const listsAllData = await listsAll();
    uni.setStorageSync("listsAllData", listsAllData);
    getfooterlist();
};
//底部列表
const getfooterlist = async () => {
    if (state.page * state.page_size > state.count) return;
    state.page++;
    const searchSketchArr = await searchSketch({
        page: state.page,
        page_size: state.page_size,
    });
    if (searchSketchArr.lists.length) {
        state.searchSketchArr =
            state.page == 1
                ? searchSketchArr.lists
                : state.searchSketchArr.concat(searchSketchArr.lists);
    }
    state.count = searchSketchArr.count || 0;
};
//  切换tab
const change = (index) => {
    state.current = index;
};
</script>
